<template>
  <div id="app" class="container">
    <div class="header">
      <h1>数据备份与恢复</h1>
    </div>
    <div class="grid-container">
      <!-- 数据备份卡片 -->
      <div class="card">
        <div class="card-header">
          <i class="fa fa-database text-blue-500 text-2xl"></i>
          <h3>数据备份</h3>
        </div>

        <div class="space-y-4">
          <div class="form-group">
            <label for="backupName">备份文件名</label>
            <input
                type="text"
                id="backupName"
                v-model="backupFileName"
                placeholder="输入备份文件名"
            >
          </div>

          <div class="form-group">
            <label for="backupDescription">备份描述</label>
            <textarea
                id="backupDescription"
                v-model="backupDescription"
                placeholder="请输入备份描述信息"
            ></textarea>
          </div>

          <div class="form-group">
            <button
                class="btn btn-primary"
                @click="startBackup"
                :disabled="isBackingUp"
            >
              <template v-if="isBackingUp">
                <span class="loading"></span> 备份中...
              </template>
              <template v-else>
                <i class="fa fa-save"></i> 开始备份
              </template>
            </button>

            <div v-if="backupStatus" class="status-message" :class="backupStatusClass">
              {{ backupStatus }}
              <a v-if="backupDownloadUrl" :href="backupDownloadUrl" class="download-link">
                <i class="fa fa-download"></i> 下载备份文件
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>


</template>

<script setup>
import { ref } from 'vue'

// 备份相关状态
const backupFileName = ref('school_management_backup_' + new Date().toISOString().slice(0, 10).replace(/-/g, ''));
const backupDescription = ref('');
const isBackingUp = ref(false);
const backupStatus = ref('');
const backupStatusClass = ref('');
const backupDownloadUrl = ref('');


// 开始备份
const startBackup = async () => {
  if (!backupFileName.value.trim()) {
    backupStatus.value = '请输入备份文件名';
    backupStatusClass.value = 'error';
    return;
  }

  isBackingUp.value = true;
  backupStatus.value = '正在创建数据库备份，请稍候...';
  backupStatusClass.value = 'processing';

  try {
    let content = null
    const bacRes =  await fetch('/api/back', {
          method: 'GET'
    })
    if (bacRes && bacRes.ok) {
      const data = await bacRes.json()||null
      content = data.data||""
    }
    else{
        throw new Error("未连接服务端");
    }
    const blobType = backupFileName.value + '/sql'
    const blob = new Blob([content], {
      type: 'application/sql'  // 标准SQL文件MIME类型
      // 或者使用以下通用类型：
      // type: 'text/plain'  // 纯文本类型
      // type: 'application/octet-stream'  // 二进制流
    });
// 设置下载文件名（包含扩展名）
    const fileName = `${backupFileName.value}.sql`;

// 创建下载链接
    const url = URL.createObjectURL(blob);
    backupDownloadUrl.value = url;

    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;  // 设置下载的文件名
    document.body.appendChild(a);
    a.click();
    // 清理
    setTimeout(() => {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }, 100);
    backupStatus.value = '备份已成功创建！';
    backupStatusClass.value = 'success';
  } catch (error) {
    backupStatus.value = '备份失败: ' + error.message;
    backupStatusClass.value = 'error';
  } finally {
    isBackingUp.value = false;
  }
};


</script>
<style scoped>
@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f5f7fa;
  color: #333;
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: 1px solid #eaeaea;
}

h1 {
  font-size: 2.2rem;
  color: #2c3e50;
  font-weight: 700;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 30px;
  margin-top: 20px;
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.card-header i {
  font-size: 1.5rem;
  margin-right: 12px;
}

.backup-icon {
  color: #3498db;
}


.card-header h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2c3e50;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #555;
  margin-bottom: 8px;
}

input, textarea, select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn i {
  margin-right: 8px;
}

.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-primary:hover {
  background-color: #2980b9;
}

.status-message {
  margin-top: 15px;
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 0.95rem;
}



.download-link {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #e1f0fa;
  color: #3498db;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.download-link:hover {
  background-color: #d0e6f7;
  text-decoration: underline;
}

.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-right: 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 20px;
  }
}

</style>